<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >社区购物</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/buy/mygood' }">我的商品</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="margintop20">
            <el-col>    
                <el-table
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}"
                    :data="cart"
                >
                    <el-table-column label="#" type="index"></el-table-column>
                    <el-table-column width="50">
                        <template slot="header" >
                            <el-checkbox  v-model="quan"> </el-checkbox>
                        </template>
                        <template slot-scope="scope">
                            <el-checkbox @change="changechecked(scope.row)" v-model="scope.row.checked" ></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" width="200">
                         <template slot-scope="scope" >
                            {{scope.row.good.name}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品图片" width="140">
                         <template slot-scope="scope" >
                            <img :src="scope.row.good.img" class="myimg" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column  label="单价">
                         <template slot-scope="scope" >
                             {{scope.row.good.price}}
                        </template>
                    </el-table-column>
                     <el-table-column  label="数量"  width="200">
                         <template slot-scope="scope" >
                             <el-input-number @change="getCurrentcount(scope.row)"  v-model="scope.row.count" :min="1"  ></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column  label="小计">
                         <template slot-scope="scope" >
                            {{scope.row.good.price * scope.row.count *1}}
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作">
                        <template slot-scope="scope" >
                            <el-popconfirm
                                confirmButtonText='好的'
                                cancelButtonText='不用了'
                                icon="el-icon-info"
                                iconColor="red"
                                title="你确定真的删除吗？"
                                @onConfirm="delOne(scope.row)"
                                >
                                <el-button slot="reference" size="mini" type="danger">删除</el-button>
                                </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="margintop20 carbox">
                    <div>
                         <!-- <el-checkbox>全选反选</el-checkbox> -->
                         <el-button @click="delCheck" style="margin-left:10px;" type="warning" size="mini" >批量选中</el-button>
                    </div>
                    <div>
                        总数量 :  {{ total }}    / 选中数量 {{checktotal}}  
                    </div>
                    <div>
                        总价格 :  {{ amount }}    / 选中价格 <countTo :startVal='startVal' :endVal='checkamount' :duration='3000'></countTo>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import countTo from "vue-count-to";
import {getmycart,changecartcount,changecartcheck,delcartone,delcartcheck} from "@/api"
export default {
    data(){
        return {
            cart:[],
            startVal:0
        }
    },
    components: { countTo },
    methods:{
        delCheck(){
            delcartcheck()
            .then(res=>{
                if(res.type){
                    this.cart = this.cart.filter(item=>!item.checked);
                }
            })
        },
        delOne(row){
            delcartone({
                _id:row._id,
            })
            .then(res=>{
                if(res.type){
                    this.cart = this.cart.filter(item=>item._id!==row._id);
                }
            })
        },
        changechecked(row){  // 修改选中
            console.log(row);
            changecartcheck({
                _id:row._id,
                checked:row.checked
            })
            .then(res=>{

            })
        },
        getCurrentcount(row){
            
            changecartcount({
                _id:row._id,
                count:row.count
            })
            .then(res=>{

            })
        }
    },
    computed:{
        quan:{
            get(){
                var flag = true;
                this.cart.forEach(item=>{
                    if(!item.checked){
                        flag = false;
                    }
                })
                return flag
            },
            set(newVal){
                this.cart = this.cart.map(item=>{
                    item = {...item,checked:newVal}
                    return item;
                });
                changecartcheck({
                    checked:newVal
                })
                .then(res=>{

                })
            }
        },
        total(){
           var total = 0;
            this.cart.forEach(item=>{
                total += item.count;
            })
            return total;
        },
        checktotal(){
           var checktotal = 0;
            this.cart.forEach(item=>{
                if(item.checked){
                    checktotal += item.count;
                }
            })
            return checktotal;
        },
        amount(){
            var amount = 0;
            this.cart.forEach(item=>{
                amount += item.count * item.good.price ;
            })
            return amount; 
        },
        checkamount(){
            var checkamount = 0;
            this.cart.forEach(item=>{
                if(item.checked){
                    checkamount += item.count * item.good.price ;
                }
            })
            return checkamount; 
        }
    },
    mounted(){
        getmycart()
        .then(res=>{
            if(res.type){
                this.cart = res.result;
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.myimg{
    width:120px;
    height:120px;
}
.carbox{
    display: flex;
    div{
        margin:0 10px; 
        font-size:14px;
        color:#303133;
    }
}
</style>